<template>
    <div class="app-container">
        教师列表
      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        <el-form-item label="教师编号">
          <el-input v-model="teacherQuery.number" placeholder="输入编号"></el-input>
        </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="findByNumber()">查询</el-button>
          <el-button type="default" @click="resetDate()">清空</el-button>
      </el-form>
    <el-table
      :data="list"
      stripe
      style="width: 100%"
      fit
      highlight-current-row
      >
      <el-table-column
        prop="teacherName"
        label="姓名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="teacherNumber"
        label="编号"
        width="130">
      </el-table-column>
      <el-table-column
        prop="teacherSex"
        label="性别">
      </el-table-column>
      
      <!--删除操作-->
      <el-table-column label="删除">
        <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="open(scope.row.teacherNumber)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
        :current-page="cur"
        :page-size="size"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next,jumper"
        @current-change="getList"
        >
        <!--layout显示布局 由组件封装
          v-on:current-change绑定切换事件
          不加括号 传入获取数据的方法 查询对应页码-->
    </el-pagination>
  </div>
</template>

<!--引入接口方法加载 该方法会连接后端 发送请求获取数据异步响应在页面-->
<script>
    import {findAllTeacher} from '@/api/edu/teacher/getList'
    
    import PanThumb from "@/components/PanThumb"

    export default {
        components:{PanThumb},
        data(){
            return {
                //设置变量初始值
                cur:1,
                size:5,
                teacherQuery:{
                  number:'',
                },
                  //默认为空 会自动添加属性用于查询
                //最终查询得到数据 返回list
                list: null,
                total: 0
            }
        },
        created(){//渲染之前执行
            this.getList()
        },
        methods:{
            getList(){//cur = 1){
              findAllTeacher().then(res =>{
                  this.list=res.value;
                }).catch(error =>{
                  console.log(error.value)
                })
            },
            
            findByNumber(){
              this.$axios.get(
                "/examsystem/teacher/findByTeacherNumber"
                ,{params:{teacherNumber: this.teacherQuery.number}}
              ).then(res=>{
                this.list=null
                var dd=[]
                dd[0]=res.data.value
                this.list = dd
              });

              // getTeacherInfo(this.teacherQuery.number).then(res=>{
              //   this.list=null
              //   console.log(res)
              //   this.list[0]=res.data
              // })
            },

            resetDate(){
              this.teacherQuery={}
              this.getList()
            },
            removeDataById(id){
              this.$axios.delete(
                "/examsystem/teacher/deleteByTeacherNumber"
                ,{params:{teacherNumber: id}}
              ).then(res=>{
                this.getList();
              });
            },
            open(id) {
              //$confirm $message 调用组件的弹窗
              this.$confirm('此操作将永久删除该教师, 是否继续?', '提示', {
                confirmButtonText: '确定',//进入then
                cancelButtonText: '取消',//进入catch
                type: 'warning'
                //封装弹窗中选项操作样式 
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                this.removeDataById(id)
              }).catch(() => {       
              });
            }
        },
    }
</script>